<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>个人认证</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <style>
        body,html{
            background: #f3f3f3;
            font-size: 14px;
            overflow: hidden;
            width: 100%;
        }
        .aui-icon-left{
            padding-left:10px;
        }

        .aui-slide-page-active{
            background: #327afa;
        }
        header {
            width: 100%;
            height: 45px;
            background: #fff;
            position: relative;
            z-index: 9;
            /*margin-bottom: 15px;*/
        }
        .win_title{
            text-align: center;
            width: 100%;
            line-height: 45px;
            height: 45px;
            font-size: 16px;
        }
        .aui-iconfont{
            position: absolute;
        }
        .aui-list-view:after{
            border:none;
        }
        .aui-pull-right{
            margin-right:20px;
        }
        .cancel{
            background: #d7e5ff;
            border-color: #d7e5ff;
            color: #327afa;
            width: 50%;
            float: left;
        }
        .confirm{
            width: 50%;
            float: left;
        }
        input.inputCardNo{
            line-height: 25px;
            margin: 0;
            width: inherit;
            padding: 0;
            border: 0;
            width: 80%;
        }
        .myBtn{
            /* position: fixed;
             bottom: 0;*/
            width: 90%;
            margin: 0 auto;
        }
        .myBtn.disable{
            background: #d9d9d9;
            color: #bababa;
        }
        .contain{
            width: 100%;
            transition: .5s;
        }
        .cardTips{
            padding:5px 15px;
            font-size: 12px;
        }
        .writeCardInfo input{
            border:none !important;
            margin: 0 !important;
            width: 70% !important;
            padding: 0 !important;
        }
        .fuwu input[type="checkbox"]{
            vertical-align:middle;
            margin-right: 5px;
            width: inherit !important;
        }
    </style>
</head>
<body>
<header class="myBorder">
    <div class="win_title aui-border-b headerCardNo">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
        <div class="">
            个人认证
        </div>
    </div>
</header>
<div class="contain">
    <div class="writeCardInfo">
        <div class="cardTips">
            信息加密，只做身份证明，不会泄露信息
        </div>
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" >
                <span>姓名</span>
                <input type="text"  name="" onpropertychange="checkName(this)" oninput="checkName(this)"    placeholder="真实姓名" value="">
            </li>
            <li class="aui-list-view-cell" >
                <span>证件类型</span>
                <span class="active">身份证</span>
            </li>
            <li class="aui-list-view-cell" >
                <span>证件号</span>
                <input type="text" onpropertychange="checkNo(this)" oninput="checkNo(this)"   name="" placeholder="证件号" value="">
            </li>
        </ul>
        <!--<div class="fuwu cardTips">-->
            <!--<input type="checkbox" name="" id="agree">同意<label for="agree" class="active">《服务协议》</label>-->
        <!--</div>-->
        <div class="myBtn disable btnCardNo" tapmode >提交</div>
    </div>
</div>
<!-- 控制影藏显示 -->
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var mobile = api.pageParam.mobile;
        var header = $api.dom('header');
        var footer = $api.dom('footer');
        //$api.fixStatusBar(header);
        api.setStatusBarStyle({
            style : 'light'
        });
    }
    var isName=false,isNo=false;
    function checkNo(obj){
        var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/g;//十五位身份证
        var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|(X|x))$/g;//十八位身份证
        var No=$(obj).val();
        if(No.length==15){
            if(isIDCard1.test(No)){
                isNo=true;
                checkAll();
            }else{
                isNo=false;
                checkAll();
            }
        }else if(No.length==18){
            if(isIDCard2.test(No)){
                isNo=true;
                checkAll();
            }else{
                isNo=false;
                checkAll();
            }
        }else if(No.length>18){
            $(obj).val($(obj).val().substr(0,18));
        }else{
            $(".btnCardNo").addClass("disable");
            $(".btnCardNo").removeAttr("onclick");
        }
    }
    function  checkName(obj) {
        var Name=$(obj).val();
        if(Name.length>0){
            isName=true;
            checkAll();
        }else{
            isName=false;
            checkAll();
        }
    }
    function send(){
        alert("已提交，等待审核")
    }
    function checkAll(){
        if(isName && isNo){
            $(".btnCardNo").removeClass("disable");
            $(".btnCardNo").attr({"onclick":"send()"});
        }else{
            $(".btnCardNo").addClass("disable");
            $(".btnCardNo").removeAttr("onclick");

        }
    }
</script>
</html>
